{% extends "layouts/base.html" %}
{% load i18n static l10n %}

{% block content %}
<div class="container py-5">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h3 class="fw-bold">
      <i class="bi bi-bag me-2"></i>{% trans "Loja Online" %}
    </h3>
    <a href="{% url 'shop:view_cart' %}" class="btn btn-primary rounded-pill px-4">
      <i class="bi bi-cart4 me-2"></i>{% trans "Ver Carrinho" %}
    </a>
  </div>

  <h5 class="fw-semibold mb-3">{% trans "Itens Disponíveis" %}</h5>
  <div class="row g-4 mb-5">
    {% for item in items %}
    <div class="col-md-4">
      <div class="card h-100 shadow-sm rounded-4">
        <div class="card-body text-center">
          <img src="{% static 'assets/img/l2/icons/5-' %}{{ item.item_id|unlocalize }}.jpg" alt="{{ item.nome }}" class="mb-3" style="width: 48px;">
          <h5 class="fw-bold">{{ item.nome }}</h5>
          <p class="mb-1">{% trans "Quantidade" %}: {{ item.quantidade }}</p>
          <p class="fw-semibold text-success">R$ {{ item.preco }}</p>
          <a href="{% url 'shop:add_item_to_cart' item.id %}" class="btn btn-outline-primary rounded-pill">
            <i class="bi bi-plus-circle me-1"></i>{% trans "Adicionar" %}
          </a>
        </div>
      </div>
    </div>
    {% empty %}
    <p>{% trans "Nenhum item disponível." %}</p>
    {% endfor %}
  </div>

  <h5 class="fw-semibold mb-3">{% trans "Pacotes" %}</h5>
  <div class="row g-4">
    {% for package in packages %}
    <div class="col-md-4">
      <div class="card h-100 shadow-sm rounded-4">
        <div class="card-body text-center">
          <h5 class="fw-bold">{{ package.nome }}</h5>
          <p class="mb-1">{% trans "Itens inclusos" %}: {{ package.itens.count }}</p>
          <p class="fw-semibold text-success">R$ {{ package.preco_total }}</p>
          <a href="{% url 'shop:add_package_to_cart' package.id %}" class="btn btn-outline-primary rounded-pill">
            <i class="bi bi-box-seam me-1"></i>{% trans "Adicionar Pacote" %}
          </a>
        </div>
      </div>
    </div>
    {% empty %}
    <p>{% trans "Nenhum pacote disponível." %}</p>
    {% endfor %}
  </div>
</div>
{% endblock %}
